<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="pagetop">
      <!-- <div class="flex flex-center topbar">
        <div class="flex-full inputbox flex flex-center" @click="onSearchTap">
          <img class="icon" mode="aspectFit" src="@/assets/img/ic_search.png">
          <input style="text-align: left" class="input flex-full" disabled placeholder="搜索商品">
        </div>
      </div>-->
      <div class="toptab">
        <div
          v-for="(item,index) in tab"
          :key="index"
          class="item"
          :class="tabIndex==index?'active':''"
          @click="onTabTap(index)"
        >{{item.text}}
        </div>
      </div>
    </div>
    <scroller
      @on-pullup-loading="getList"
      lock-x
      ref="scroller"
      :pullup-config="{content:'',upContent:'',downContent:'释放加载更多',loadingContent:'加载中...',}"
      height="-45"
      :use-pullup="true"
    >
      <div class="page">
        <div class="block" style="margin-top:12px;" v-for="(item,index) in orders" :key="index">
          <div class="brokerageitem">
            <div class="header">
              <div class="ordernumber order-num" @click="onInfo(item)">订单号:{{item.order_sn}}</div>
              <!-- <div class='state'>待成团</div> -->
              <div class="state">{{item.state_desc}}</div>
            </div>

            <!--待评价商品-->
            <template v-if="ifEvaluate">
              <div
                class="content"
                @click="onMallInfo(null, item)"
              >
                <chimage class="image" :src="item.goods_image"></chimage>
                <div style="flex:1;">
                  <div class="titlebar">
                    <div class="title">{{item.goods_name}}</div>
                    <div class="price">￥{{item.order_amount}}</div>
                  </div>

                  <div class="pricebar" @click.stop>
                    <div style="flex:1">X{{item.goods_number}}</div>
                    <div
                      v-if="item.after_sale!='0'"
                      class="buttom"
                      @click="onAfter(item,null)"
                    >售后
                    </div>
                  </div>
                </div>
              </div>
            </template>

            <!--其他商品-->
            <template v-else>

              <!--是否是京东商品-->
              <template v-if="item.seller_member_id == -1">
                <!--如果item.children == false 京东订单id取item.children_order[0].jdOrderId-->
                <template v-if="item.children == false">
                  <div class="header">
                    <div class="ordernumber">京东订单号:{{item.children_order[0].jdOrderId}}</div>
                    <div
                      v-if="item.order_state == 20 && item.seller_member_id == -1"
                      class="buttom"
                      @click="confirmReceive(item.order_sn, item.children_order[0].jdOrderId)"
                    >确认收货
                    </div>
                  </div>
                  <div
                    class="content"
                    v-for="(goodItem,goodIndex) in item.extend_order_goods"
                    :key="goodIndex"
                    @click="onMallInfo(goodItem,item)"
                  >
                    <chimage class="image" :src="goodItem.goods_image"></chimage>
                    <div style="flex:1;">
                      <div class="titlebar">
                        <div class="title">{{goodItem.goods_name}}</div>
                        <div class="price">￥{{goodItem.transaction_amount}}</div>
                      </div>

                      <div class="pricebar" @click.stop>
                        <div style="flex:1">X{{goodItem.goods_number}}</div>
                        <div
                          v-if="item.order_state >= 20 && item.seller_member_id == -1"
                          class="buttom buttomred"
                          @click="onLogistics(item, goodItem)"
                        >查看物流
                        </div>
                        <div
                          v-if="goodItem.after_sale!='0' && item.order_state == 40"
                          class="buttom"
                          @click="onAfter(item,goodItem)"
                        >售后
                        </div>
                      </div>
                    </div>
                  </div>
                </template>

                <!--如果item.children == true 京东订单详情则根据children_order.sku来获取对应数据-->
                <template v-else>
                  <div
                    style="display: block"
                    class="content"
                    v-for="(goodItem,goodIndex) in item.children_order"
                    :key="goodIndex"
                  >
                    <div class="header" style="padding-left: 0">
                      <div class="ordernumber">京东订单号:{{goodItem.jdOrderId}}</div>
                      <div
                        v-if="item.order_state == 20 && item.seller_member_id == -1"
                        class="buttom"
                        @click="confirmReceive(item.order_sn, goodItem.jdOrderId)"
                      >确认收货
                      </div>
                    </div>
                    <div v-for="(skuItem, skuIndex) in goodItem.sku" :key="skuIndex" style="display: flex" @click="onMallInfo(item.extend_order_goods[skuItem.skuId],item)">
                      <template v-if="item.extend_order_goods[skuItem.skuId]">
                        <chimage class="image" :src="item.extend_order_goods[skuItem.skuId].goods_image"></chimage>
                        <div style="flex:1;">
                          <div class="titlebar">
                            <div class="title">{{item.extend_order_goods[skuItem.skuId].goods_name}}</div>
                            <div class="price">￥{{item.extend_order_goods[skuItem.skuId].transaction_amount}}</div>
                          </div>

                          <div class="pricebar" @click.stop>
                            <div style="flex:1">X{{item.extend_order_goods[skuItem.skuId].goods_number}}</div>
                            <div
                              v-if="item.order_state >= 20 && item.seller_member_id == -1"
                              class="buttom buttomred"
                              @click="onLogistics(item, item.extend_order_goods[skuItem.skuId])"
                            >查看物流
                            </div>
                            <div
                              v-if="goodItem.after_sale!='0' && item.order_state == 40"
                              class="buttom"
                              @click="onAfter(item,item.extend_order_goods[skuItem.skuId])"
                            >售后
                            </div>
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>
                </template>

              </template>

              <!--不是京东商品-->
              <template v-else>
                <div
                  class="content"
                  v-for="(goodItem,goodIndex) in item.extend_order_goods"
                  :key="goodIndex"
                  @click="onMallInfo(goodItem,item)"
                >
                  <chimage class="image" :src="goodItem.goods_image"></chimage>
                  <div style="flex:1;">
                    <div class="titlebar">
                      <div class="title">{{goodItem.goods_name}}</div>
                      <div class="price">￥{{goodItem.transaction_amount}}</div>
                    </div>

                    <div class="pricebar" @click.stop>
                      <div style="flex:1">X{{goodItem.goods_number}}</div>
                      <div
                        v-if="item.order_state >= 20 && item.seller_member_id == -1"
                        class="buttom buttomred"
                        @click="onLogistics(item, goodItem)"
                      >查看物流
                      </div>
                      <div
                        v-if="goodItem.after_sale!='0' && item.order_state == 40"
                        class="buttom"
                        @click="onAfter(item,goodItem)"
                      >售后
                      </div>
                    </div>
                  </div>
                </div>
              </template>

            </template>

            <!-- <div class='footer'>
          <div class='left'>
              <div class='group'>5人团</div>
              <div class='group grouping'>还差2人</div>
          </div>
          <div class='right'>
            <div v-if="item.allowCancel" class='buttom'>取消订单</div>
            <div class='buttom buttomred'>邀请好友</div>
          </div>
            </div>-->
            <div class="footer">
              <template v-if="ifEvaluate">
                <div style="width: 100%; display: flex; justify-content: flex-end">
                  <div
                    class="buttom buttomred"
                    @click="onEvaluation(item)"
                  >立即评价
                  </div>
                </div>
              </template>
              <template v-else>
                <div v-if="item.groupbuyInfo" class="left">
                  <div class="group">{{item.groupbuyInfo.groupbuy_number}}人团</div>
                  <div
                    class="group grouping"
                    v-if="item.groupbuyInfo.groupbuy_number-item.groupbuyInfo.league_number>0"
                  >还差{{item.groupbuyInfo.groupbuy_number-item.groupbuyInfo.league_number}}人
                  </div>
                </div>
                <div v-else class="left"></div>
                <div class="right">
                  <div
                    v-if="item.order_state==ordersState['待收货']&&(item.seller_member_id==-2||item.seller_member_id>0)"
                    class="buttom buttomred"
                    @click="onConfirm(item)"
                  >确认收货
                  </div>
                  <div
                    v-if="item.order_state==ordersState['待付款']"
                    class="buttom buttomred"
                    @click="onPay(item)"
                  >立即支付
                  </div>
                  <div
                    v-if="item.allowCancel&&!item.groupbuyInfo&&item.order_state==ordersState['待付款']"
                    class="buttom"
                    @click="onCancel(item)"
                  >取消订单
                  </div>
                </div>
              </template>

            </div>
          </div>
        </div>
        <load-more
          v-if="!more&&!orders.length"
          :show-loading="false"
          :tip="'暂无数据'"
          background-color="#fbf9fe"
        ></load-more>
      </div>
    </scroller>
    <popup v-model="isConfirm">
      <checklist title="请选择" label-position="left" :options="confirmList" v-model="confirmValue"></checklist>
      <div style="margin:15px 0">
        <button class="button" @click="onConfirmTap">确认收货</button>
      </div>
    </popup>
  </div>
</template>

<script>
  import Enum from '@/config/enum'
  import Me from '@/dll/me'
  // import Pay from '@/dll/pay'
  // import util from '@/utils/util'

  export default {
    name: 'mallOrder',
    data () {
      let tab = []
      for (var i in Enum.IN_PURCHASING_ORDERS_STATE) {
        tab.push({
          text: i,
          state: Enum.IN_PURCHASING_ORDERS_STATE[i]
        })
      }
      return {
        xheader: {
          title: '内购订单'
        },
        tab: tab,
        tabIndex: 0,
        orders: [],
        page: 1,
        more: true,
        isConfirm: false,
        confirmList: [],
        confirmValue: [],
        wxPayUrl: '',
        ordersState: Enum.MALL_ORDERS_STATE
      }
    },
    created () {
    },
    activated () {
      this.init()
    },
    computed: {
      ifEvaluate () {
        return this.tab[this.tabIndex].state === Enum.IN_PURCHASING_ORDERS_STATE.待评价
      }
    },
    methods: {
      onSearchTap () {
      },
      onConfirm (item) {
        let confirmList = []
        if (item.seller_member_id > 0) {
          for (let i in item.delivery_info) {
            if (item.delivery_info[i].state == 1) {
              confirmList.push({
                value:
                  item.delivery_info[i].express +
                  ' ' +
                  item.delivery_info[i].code,
                key: item.delivery_info[i].e_id
              })
            }
          }
        } else if (item.seller_member_id == -2) {
          for (let i in item.children_order.package_list) {
            if (item.children_order.package_list[i].packageStatus == 1) {
              confirmList.push({
                value: item.children_order.package_list[i].packageId,
                key: item.children_order.package_list[i].packageId
              })
            }
          }
        }

        if (confirmList.length) {
          this.isConfirm = true
          this.confirmList = confirmList
          this.confirmItem = item
        }
      },
      onConfirmTap () {
        if (!this.confirmValue.length) {
          this.$vux.alert.show({
            title: '提示',
            content: '请选择物流信息'
          })
        } else {
          this.isConfirm = false
          this.confirm()
        }
      },
      async confirm () {
        let confirmExpFun
        let param = {}
        let item = this.confirmItem
        let confirmValue = this.confirmValue
        let tempid = []
        for (let i in confirmValue) {
          tempid.push(confirmValue[i])
        }
        if (item.seller_member_id > 0) {
          param.order_id = item.purchase_order_id
          param.express_id = tempid.join(',')
          confirmExpFun = Me.mallZyOrderConfirmExp
        } else if (item.seller_member_id == -2) {
          param.order_id = item.children_order.orderId
          param.package_id = tempid.join(',')
          confirmExpFun = Me.mallYxOrderConfirmExp
        }
        if (confirmExpFun) {
          this.$vux.loading.show({
            text: '加载中'
          })
          let res = await confirmExpFun(param)
          this.$vux.loading.hide()
          if (res.code == 0) {
            this.$vux.alert.show({
              title: '提示',
              content: '已确认收货',
              onHide: () => {
                this.init()
              }
            })
          } else {
            this.$vux.alert.show({
              title: '提示',
              content: res.msg
            })
          }
        }
      },
      onAfter (item, goodItem) {
        if (!goodItem) {
          this.$router.push({
            name: 'mallOrderAfterSaleApply',
            params: { goodItem: item, order_sn: item.order_sn }
          })
          return
        }
        this.$router.push({
          name: 'mallOrderAfterSaleApply',
          params: { goodItem: goodItem, order_sn: item.order_sn }
        })
      },
      onMallInfo (goods, item) {
        if (item.groupbuyInfo) {
          this.$router.push({
            name: 'mallGroupInfo',
            params: { id: item.groupbuyInfo.groupbuy_id }
          })
        } else {
          if (!goods) {
            this.$router.push({
              name: 'mallInfo',
              params: { id: item.goods_sku }
            })
            return
          }
          this.$router.push({
            name: 'mallInfo',
            params: { id: goods.goods_sku }
          })
        }
      },
      onInfo (item) {
        let type = 0
        if (item.seller_member_id == -1) {
          type = 2
        } else if (item.seller_member_id == -2) {
          type = 3
        } else {
          type = 1
        }
        this.$router.push({
          name: 'mallOrderInfo',
          params: { id: item.order_sn },
          query: { type: type }
        })
      },
      init () {
        this.page = 1
        this.more = true
        this.orders = []
        this.getList()
      },
      onTabTap (index) {
        if (this.tab[index].state == '售后') {
          this.$router.push({ name: 'mallOrderAfferSale' })
          return
        }
        this.tabIndex = index
        this.$refs.scroller.enablePullup()
        this.$refs.scroller.reset({
          top: 0
        })
        this.init()
      },
      // 支付订单
      async onPay (item) {
        // eslint-disable-next-line no-unused-vars
        let param = [item.order_sn]
        this.$router.push({
          name: 'payIng',
          query: {
            isOrder: true
          },
          params: { sn: [item.order_sn] }
        })
      },

      // 立即评价
      onEvaluation (item) {
        this.$router.push({
          name: 'mallOrderComment',
          query: { order_id: item.purchase_order_id, goods_sku: item.goods_sku, goods_image: item.goods_image }
        })
      },

      // 取消订单
      async onCancel (item) {
        this.$vux.loading.show({
          text: '请稍后'
        })
        let res = await Me.cancelInPurchasingOrderVerify(item.purchase_order_id)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.$router.push({
            name: 'orderCancel',
            params: { item: item, reason: res.data }
          })
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg
          })
        }
      },
      // 获取订单列表
      async getList () {
        // if (!this.more) {
        //   return
        // }
        // let tab = this.tab
        // let index = this.tabIndex
        // let tabItem = tab[index]
        // let page = this.page
        // let param = {
        //   page: page,
        //   sub_order_type: 1
        // }
        // if (tabItem.state != Enum.IN_PURCHASING_ORDERS_STATE.所有订单) {
        //   param.order_state = tabItem.state
        // }
        // this.$vux.loading.show({
        //   text: '加载中'
        // })
        // let res = await Me.getInPurchasingOrders(param)
        // this.$vux.loading.hide()
        // if (res.code == 0) {
        //   if (page >= res.data.pageTotal) {
        //     this.more = false
        //     this.$refs.scroller.disablePullup()
        //   } else {
        //     this.$refs.scroller.donePullup()
        //   }
        //   let orders = []
        //   for (var i in res.data.data) {
        //     orders.push(res.data.data[i])
        //   }
        //   this.page = page + 1
        //   this.orders = [].concat(this.orders, orders)
        //   this.$forceUpdate()
        // } else {
        //   this.more = false
        //   this.$forceUpdate()
        //   this.$refs.scroller.disablePullup()
        //   // this.$vux.alert.show({
        //   //   title: "提示",
        //   //   content: res.msg,
        //   // });
        // }
        let tab = this.tab
        let index = this.tabIndex
        let tabItem = tab[index]
        let page = this.page
        let res = null
        let param = {
          page: page
        }
        if (!this.more) {
          return
        }
        this.$vux.loading.show({
          text: '加载中'
        })
        if (tabItem.state === Enum.IN_PURCHASING_ORDERS_STATE.待评价) {
          res = await Me.getToBeEvaluatedOrders(param)
        } else {
          param.sub_order_type = 1
          if (tabItem.state != Enum.IN_PURCHASING_ORDERS_STATE.所有订单) {
            param.order_state = tabItem.state
          }
          res = await Me.getInPurchasingOrders(param)
        }
        this.$vux.loading.hide()
        if (res.code == 0) {
          if (page >= res.data.pageTotal) {
            this.more = false
            this.$refs.scroller.disablePullup()
          } else {
            this.$refs.scroller.donePullup()
          }
          let orders = []
          for (var i in res.data.data) {
            orders.push(res.data.data[i])
          }
          this.page = page + 1
          this.orders = [].concat(this.orders, orders)
          this.$forceUpdate()
        } else {
          this.more = false
          this.$forceUpdate()
          this.$refs.scroller.disablePullup()
          // this.$vux.alert.show({
          //   title: "提示",
          //   content: res.msg,
          // });
        }
      },

      // 查看物流
      onLogistics (item, goodItem) {
        this.$router.push({
          name: 'logistics',
          params: { goodItem: goodItem, order_sn: item.order_sn }
        })
      },
      async confirmReceive (order_sn, jd_order_id) {
        this.$vux.loading.show({
          text: '请稍后'
        })
        let res = await Me.confirmJdOrder(order_sn, jd_order_id)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.$vux.alert.show({
            title: '提示',
            content: '已确认收货',
            onHide: () => {
              this.init()
            }
          })
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .wxPayUrl {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    border: none;
  }

  .page {
    padding-top: 45px;
    padding-bottom: 12px;
  }

  .pagetop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

  .topbar {
    box-sizing: border-box;
    background-color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .topbar .icon {
    width: 20px;
    height: 20px;
    padding-left: 12px;
    padding-right: 12px;
    display: block;
  }

  .topbar .inputbox {
    background: #fbf8f7;
    height: 35px;
  }

  .topbar .input {
    font-size: 12px;
    color: #351009;
    text-align: center;
    line-height: 17px;
  }

  .toptab {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    padding-left: 12px;
    padding-right: 12px;
    height: 45px;
    background-color: #fff;
  }

  .toptab > .item {
    flex: 1;
    height: 100%;
    display: block;
    line-height: 45px;
    font-size: 14px;
    color: #351009;
    opacity: 0.2;
    text-align: center;
    position: relative;
  }

  .toptab > .item.active {
    opacity: 1;
  }

  .toptab > .item.active::after {
    position: absolute;
    content: "";
    width: 100%;
    bottom: 0;
    left: 0;
    height: 1px;
    background: #b0290f;
  }

  .brokeragebox {
    display: block;
    background-color: #fff;
  }

  .brokeragebox .des {
    font-size: 12px;
    color: #351009;
    line-height: 17px;
    opacity: 0.5;
  }

  .brokeragebox .box {
    padding: 20px 16px;
  }

  .brokeragebox .brokerage {
    margin-top: 7px;
    font-size: 40px;
    color: #ae2309;
    line-height: 56px;
  }

  .brokeragebox button {
    font-size: 16px;
    color: #fff;
    height: 48px;
    line-height: 48px;
  }

  .brokerageitem {
    background-color: #fff;
  }

  .brokerageitem .header {
    display: flex;
    padding: 12px 16px;
    font-size: 12px;
    line-height: 17px;
    align-items: center;
  }

  .brokerageitem .ordernumber {
    flex: 1;
    color: #9f8d89;
  }

  .brokerageitem .order-num {
    color: #333;
  }

  .brokerageitem .state {
    color: #b0290f;
  }

  .brokerageitem .await {
    color: #b0290f;
  }

  .brokerageitem .complete {
    color: #52322c;
  }

  .brokerageitem .return {
    color: #f4b13b;
  }

  .brokerageitem .content {
    display: flex;
    flex-direction: row;
    padding: 12px 16px;
    border-top: 1px solid #fbf8f7;
    border-bottom: 1px solid #fbf8f7;
    align-items: center;
  }

  .brokerageitem .content .image {
    width: 90px;
    height: 90px;
    display: block;
    margin-right: 24px;
    background-color: #f5f5f5;
  }

  .brokerageitem .content .titlebar {
    display: flex;
    flex-direction: row;
  }

  .brokerageitem .content .title {
    flex: 1;
    font-size: 14px;
    color: #9f8d89;
    line-height: 20px;
    font-weight: 500;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .brokerageitem .content .pricebar {
    margin-top: 5px;
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 14px;
    color: #351009;
    line-height: 20px;
  }

  .brokerageitem .content .price {
    font-size: 14px;
    color: #b0290f;
  }

  .brokerageitem .footer {
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .brokerageitem .footer .left {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .brokerageitem .footer .right {
    display: flex;
    align-items: center;
  }

  .brokerageitem .footer .group {
    height: 24px;
    display: block;
    box-sizing: border-box;
    width: 54px;
    border: 1px solid #46241e;
    font-size: 10px;
    color: #46241e;
    line-height: 22px;
    text-align: center;
    border-radius: 12px;
  }

  .brokerageitem .footer .group.grouping {
    color: #b0290f;
    border-color: #b0290f;
  }

  .brokerageitem .footer .group + .group {
    margin-left: 8px;
  }

  .buttom {
    height: 28px;
    display: block;
    box-sizing: border-box;
    width: 64px;
    font-size: 12px;
    color: #46241e;
    line-height: 26px;
    text-align: center;
    border: 1px solid #d4d4d4;
  }

  .buttom.buttomred {
    color: #fff;
    border-color: #b0290f;
    background-color: #b0290f;
  }

  .buttom + .buttom {
    margin-left: 8px;
  }
</style>
